<script setup>
import {
    EmailOutlined,
    LockOpenOutlined,
    RemoveRedEyeOutlined,
    RemoveRedEyeRound,
} from "@vicons/material";
import { reactive, ref } from "vue";
import { useLoginModalStore } from "@/stores/loginModalStore";
import { useUserStore } from "@/stores/userStore";
import noteServeRequest from "@/utils/request";
import userApi from '@/utils/api/userApi'

// 共享库（用户信息）
const userStore = useUserStore();
// 设置用户信息函数
const { setUserInfo } = userStore;

// 获取登陆模态框共享的数据
const loginModalStore = useLoginModalStore();
// 解构出改变登录模态框显示状态函数
const { changeLoginModalShowStatus } = loginModalStore;

// 自定义的事件名称
const emits = defineEmits("changeWindow");

// 表单数据值
const loginFormValue = reactive({
    account: "", // 账号（邮箱）
    password: "", // 密码
    trim: null, // 是否同意本公司条款与协议
});

// 登录验证规则
const loginRules = {
    account: [
        {
            required: true,
            message: "请输入邮箱账号！",
            trigger: "input",
        },
        {
            message: "请输入正确的邮箱账号！",
            validator: (rule, value) => {
                return /^[A-Za-z0-9]+([-._][A-Za-z0-9]+)*@[A-Za-z0-9]+(-[A-Za-z0-9]+)*(\.[A-Za-z]{2,6}|[A-Za-z]{2,4}\.[A-Za-z]{2,3})$/.test(
                    value
                );
            },
            trigger: "input",
        },
    ],
    password: {
        required: true,
        message: "请输入密码！",
        trigger: "input",
    },
    trim: {
        message: "请认证阅读本公司的条款与协议",
        validator: (rule, value) => {
            return !!value;
        },
        trigger: "change",
    },
};

// 登录表单引用对象
const loginFormRef = ref(null);

// 去登陆
const toLogin = async () => {
    // 验证表单
    await loginFormRef.value?.validate(errors => {
        if (errors) throw "表单验证失败"
    })
    // 请求 API
    let loginAPI = { ...userApi.login }
    // 请求参数
    loginAPI.data = {
        email: loginFormValue.account,
        password: loginFormValue.password,
    }
    // 发送请求
    noteServeRequest(loginAPI).then(response => {
        if (!response) return;
        // 1：关闭登录的窗口
        changeLoginModalShowStatus(false);
        // 2：设置用户的信息
        setUserInfo(response.data.userToken, response.data.user)

    })
};
</script>

<template>
    <n-card>
        <!-- 登录标题 -->
        <n-space align="center" justify="space-between">
            <h2>登录</h2>
            <n-text>
                暂无账号？
                <n-button text type="info" @click="emits('changeWindow', 2)">
                    前往注册
                </n-button>
            </n-text>
        </n-space>
        <!-- 登陆表单 -->
        <n-form ref="loginFormRef" :model="loginFormValue" :rules="loginRules">
            <!-- 邮箱输入框 -->
            <n-form-item first label="邮箱" path="account">
                <n-input placeholder="请输入邮箱账号" v-model:value="loginFormValue.account">
                    <template #prefix>
                        <n-icon :size="20" :component="EmailOutlined" />
                    </template>
                </n-input>
            </n-form-item>

            <!-- 密码输入框 -->
            <n-form-item label="密码" path="password">
                <n-input type="password" show-password-on="click" placeholder="请输入账号密码"
                    v-model:value="loginFormValue.password">
                    <!-- 密码前缀图标 -->
                    <template #prefix>
                        <n-icon :size="20" :component="LockOpenOutlined" />
                    </template>
                    <!-- 密码可见图标 -->
                    <template #password-visible-icon>
                        <n-icon :size="20" color="rgb(53, 175, 53)" :component="RemoveRedEyeRound" />
                    </template>
                    <!-- 密码不可见图标 -->
                    <template #password-invisible-icon>
                        <n-icon :size="20" :component="RemoveRedEyeOutlined" />
                    </template>
                </n-input>
            </n-form-item>

            <!-- 同意条款复选框 -->
            <n-form-item :show-label="false" path="trim">
                <n-checkbox v-model:checked="loginFormValue.trim">
                    <n-text>
                        同意本公司的
                        <n-button text type="info">
                            《条款与协议》
                        </n-button>
                    </n-text>
                </n-checkbox>
            </n-form-item>

            <n-button block type="success" @click="toLogin">
                登录
            </n-button>

            <div style="text-align: center;margin-top: 10px;">
                <n-button text text-color="rgba(0,0,0, 0.3)">忘记密码</n-button>
            </div>
        </n-form>
    </n-card>
</template>

<style>
/* 密码输入框移除自带的清除图标和可见图标 */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}
</style>

